<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{ background:#000;}
#c1{background:#fff; width:400px;height:400px;}/*宽高写在这里就会有问题*/
</style>
<script>
window.onload = function(){
	
	
	var oC=document.getElementById('c1');
	
	//绘制环境相当于画板
	//oC.getContext('3d');//3d立体图像现在还没有完全实现，可以用webgl来代替
	var oGC=oC.getContext('2d');
	
	oGC.beginPath();
	
	//点下第一个点(原点)
	oGC.moveTo(200, 200);
	
	//然后点下第二个点：0弧度对应的点(300, 200)	再点下第三个点：90*Math.PI/180弧度对应的点(200,300)		
	//false:顺时针画出的下半圆，true：逆时针画出的上半圆
	oGC.arc(200, 200, 100, 0, 180*Math.PI/180, false);
	
	//闭合路径(即将最后一个点和第一个点连接, 即便是整个圆也会连接一次)
	oGC.closePath();
	
	oGC.stroke();
};
</script>
</head>

<body>
	<canvas id="c1" width="400" height="400">不支持canvas的浏览器显示的内容</canvas><!--默认宽度：300默认高度：150透明度：０（完全透明）-->
</body>
</html>
